<template>
	<view class="find-capsule pl-30 pr-30 y-flex y-row y-align-center border-radius-100" :class="{'border-1': border}" :style="{
		'background-color': bgColor,
		'border-color': border ? color : '',
		'border-left-color': border ? color : '',
		'border-right-color': border ? color : ''
	}">
		<template v-for="(icon, i) in data">
			<com-icon :name="icon" :color="color" size="35" @click="handleIconClick(icon)"></com-icon>
			<view class="find-capsule-gap ml-20 mr-15" :style="{'background-color': color}" v-if="i < data.length - 1"></view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			border: {
				type: Boolean,
				default: false
			},
			mode: {
				type: String,
				default: 'dark'
			}
		},
		computed: {
			bgColor () {
				return this.mode == 'dark' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)'
			},
			color () {
				return this.mode == 'dark' ? '#fff ': '#333'
			}
		},
		methods: {
			handleIconClick (icon) {
				this.$emit('iconClick', icon)
			}
		}
	}
</script>

<style>
	.find-capsule {
		height: 60rpx;
	}
	.find-capsule-gap {
		width: 1px;
		height: 35rpx;
	}
</style>